<script setup lang="ts">
import { getPhoneListData_c, getChooseData_c, getPhoneModuleList_c, getPhoneModuleBannerList_c, getTopSalesNumProduct_c, getSpuListProduct_c } from '@/api/lidare'
import HomePhoneCard from '@/components/home/HomePhoneCard.vue'
import type { PhoneData, Prices, Chense, PhoneModules, PhoneModuleBanners, HotPhones, Romes, BodyColor, VersionType, NetworkType } from '@/type/typings'
import { ref, onMounted, watch, computed, toRefs, onActivated } from 'vue'

const props = defineProps<{
    top: number,
    keyword: string,
    phId: string,
}>()

const { keyword } = toRefs(props)


const zhActive = ref(true)
const prActive = ref(false)

// 综合按钮点击事件
const zhChange = async () => {
    prActive.value = false
    zhActive.value = true

    let { data: data2 } = await getPhoneListData_c({ page: phonePage.value, classId: currOneIndex.value, brandId: currTwoIndex.value, spuId: currThreeIndex.value, startPrice: stPrice.value, endPrice: enPrice.value, conditionId: chenseActive.value, romId: romeActive.value, bodyColorId: bodyColorActive.value, versionTypeId: versionTypeActive.value, networkTypeId: networkTypeActive.value, keyword: keyword.value })
    phoneListData.value = data2._data.list
    console.log(phoneListData.value, 'phone数据');

}

// 价格点击事件
// 降序还是升序
const sortFlag = ref(true)
const prChange = () => {
    zhActive.value = false
    prActive.value = true
    sortFlag.value = !sortFlag.value
    if (sortFlag.value) {
        phoneListData.value.sort(function (a, b) {
            return b.salesPriceYuan - a.salesPriceYuan;
        })
        console.log(phoneListData.value, '排序后');
    } else {
        phoneListData.value.sort(function (a, b) {
            return a.salesPriceYuan - b.salesPriceYuan;
        })
        console.log(phoneListData.value, '排序前');
    }

}

// onload事件初始化
const phonePage = ref(0)
const loading = ref(false)
const finished = ref(false)

// 机型选择左侧banner的显示 不限机型
const showActive = ref(true)
const showActive2 = () => {
    showActive.value = true
    currTwoIndex.value = '0'
}

// 机型和筛选的actice
const phoneActive = ref(false)
const chooseActive = ref(false)


// 关闭右弹窗
const closeShowright = () => {
    if (sureText.value == "确认") {
        showRight.value = false
    }
}

// 机型的不限机型按钮事件
const textValue = ref('不限机型')
const moeulePhoneActive = ref(true)
const chooseMoudlePhone = async () => {
    textValue.value = '不限机型'
    showPhoneModule.value = false
    currThreeIndex.value = '0'
    moeulePhoneActive.value = true

}

// 机型的第一层选择 高亮
const currOneIndex = ref();
currOneIndex.value = props.phId
const oneActive = (id: string) => {
    currOneIndex.value = id
    showActive.value = true
    currTwoIndex.value = '0'
}

watch(
    currOneIndex, // 注意这里变化
    async (n, o) => {
        if (n != o) {
            let { data: data4 } = await getPhoneModuleBannerList_c(n)
            PhoneModuleBanner.value = data4._data.brandList
            console.log(PhoneModuleBanner.value);

            let { data: data5 } = await getTopSalesNumProduct_c(n)
            hotPhoneData.value = data5._data.data

            phoneActive.value = true
        }
    }
)


// 机型的banner的选择 高亮
const currTwoIndex = ref('0')
const twoActive = (id: string) => {
    currTwoIndex.value = id
    showActive.value = false
}
watch(
    currTwoIndex, // 注意这里变化
    async (n, o) => {
        if (n != o) {
            let { data: data6 } = await getSpuListProduct_c(currOneIndex.value, n)
            phoneSuplist.value = data6._data.spuList

            phoneActive.value = true
        }
    }
)

// 机型的第三层确认 高亮 关闭弹窗
const currThreeIndex = ref('0')
const changePhoneData = (id: string, text: string) => {
    currThreeIndex.value = id
    showPhoneModule.value = false
    moeulePhoneActive.value = false
    textValue.value = text

}
watch(
    currThreeIndex, // 注意这里变化
    async (n, o) => {
        if (n != o) {
            let { data: data1 } = await getChooseData_c(currOneIndex.value, currTwoIndex.value, n)
            console.log(data1._data.attr, '111');
            phoneActive.value = true
            chooseDataPrice.value = data1._data.attr[0] ? data1._data.attr[0] : ''
            chooseDataChense.value = data1._data.attr[1] ? data1._data.attr[1] : ''
            chooseDataRomes.value = data1._data.attr[2] ? data1._data.attr[2] : ''
            chooseDataBodyColor.value = data1._data.attr[3] ? data1._data.attr[3] : ''
            chooseDataVersionType.value = data1._data.attr[4] ? data1._data.attr[4] : ''
            chooseDataNetworkType.value = data1._data.attr[5] ? data1._data.attr[5] : ''

        }
    }
)


// 筛选弹窗去到机型弹窗
const goToChoosePhoneModule = () => {
    showPhoneModule.value = true
}

// 手机列表数据
const phoneListData = ref(<Array<PhoneData>>([]))

// 筛选价格 事件
const priceActive = ref(-1)
const stPrice = ref(0)
const enPrice = ref(0)
const chooseDataPrice = ref(<Prices>({}))
const changePrice = (startPrice: number, endPrice: number, index: number) => {
    if (index == priceActive.value) {
        priceActive.value = -1
        return
    }
    priceActive.value = index
    stPrice.value = startPrice / 100
    enPrice.value = endPrice / 100
    chooseActive.value = true

}
// 筛选成色 事件
const chooseDataChense = ref(<Chense>({}))
const chenseActive = ref('0')
const changeChense = (id: string) => {
    if (id == chenseActive.value) {
        chenseActive.value = '0'
        return
    }
    chenseActive.value = id
    chooseActive.value = true
}
// 筛选存储容量 事件
const chooseDataRomes = ref(<Romes>({}))
const romeActive = ref('0')
const changeRome = (id: string) => {
    if (id == romeActive.value) {
        romeActive.value = '0'
        return
    }
    romeActive.value = id
    chooseActive.value = true
}

// 筛选颜色 事件
const chooseDataBodyColor = ref(<BodyColor>({}))
const bodyColorActive = ref('0')
const changebodyColor = (id: string) => {
    if (id == bodyColorActive.value) {
        bodyColorActive.value = '0'
        return
    }
    bodyColorActive.value = id
    chooseActive.value = true
}

// 筛选版本 事件
const chooseDataVersionType = ref(<VersionType>({}))
const versionTypeActive = ref('0')
const changeVersionType = (id: string) => {
    if (id == versionTypeActive.value) {
        versionTypeActive.value = '0'
        return
    }
    versionTypeActive.value = id
    chooseActive.value = true
}

// 筛选网络 事件
const chooseDataNetworkType = ref(<NetworkType>({}))
const networkTypeActive = ref('0')
const changeNetworkType = (id: string) => {
    if (id == networkTypeActive.value) {
        networkTypeActive.value = '0'
        return
    }
    networkTypeActive.value = id
    chooseActive.value = true
}

// 机型筛选的列表
const choosePhoneModuleData = ref(<Array<PhoneModules>>([]))

// 机型筛选的列表
const PhoneModuleBanner = ref(<Array<PhoneModuleBanners>>([]))

// 机型筛选热门机型
const hotPhoneData = ref(<Array<HotPhones>>([]))

// 机型筛选对应banner的数据
const phoneSuplist = ref(<Array<HotPhones>>([]))

// 筛选的打开
const showRight = ref(false)
const showPopup = () => {
    showRight.value = true;
}

// 机型的打开
const showPhoneModule = ref(false)
const showPopup2 = () => {
    showPhoneModule.value = true;
};

watch(
    [phonePage, currOneIndex, currTwoIndex, currThreeIndex, stPrice, enPrice, chenseActive, romeActive, bodyColorActive, versionTypeActive, networkTypeActive, keyword],
    async (n, o) => {
        console.log(n);
        console.log(o);
        if (n != o) {

            let { data: data2 } = await getPhoneListData_c({ page: phonePage.value, classId: currOneIndex.value, brandId: currTwoIndex.value, spuId: currThreeIndex.value, startPrice: stPrice.value, endPrice: enPrice.value, conditionId: chenseActive.value, romId: romeActive.value, bodyColorId: bodyColorActive.value, versionTypeId: versionTypeActive.value, networkTypeId: networkTypeActive.value, keyword: keyword.value })
            phoneListData.value = data2._data.list
            console.log(phoneListData.value, 'phone数据2');
        }
    }
)

// 挂载是获取的数据
onMounted(async () => {
    // 手机列表的数据
    let { data: data2 } = await getPhoneListData_c({ page: phonePage.value, classId: currOneIndex.value, brandId: currTwoIndex.value, spuId: currThreeIndex.value, startPrice: stPrice.value, endPrice: enPrice.value, conditionId: chenseActive.value, romId: romeActive.value, bodyColorId: bodyColorActive.value, versionTypeId: versionTypeActive.value, networkTypeId: networkTypeActive.value, keyword: keyword.value })
    phoneListData.value = data2._data.list
    console.log(phoneListData.value, 'phone数据');


    // 筛选的数据
    let { data: data1 } = await getChooseData_c(currOneIndex.value, currTwoIndex.value, currThreeIndex.value)
    // chooseDataPrice.value = data1._data.attr[0]
    // chooseDataChense.value = data1._data.attr[1]
    chooseDataPrice.value = data1._data.attr[0] ? data1._data.attr[0] : ''
    chooseDataChense.value = data1._data.attr[1] ? data1._data.attr[1] : ''

    // 机型类别的数据
    let { data: data3 } = await getPhoneModuleList_c()
    choosePhoneModuleData.value = data3._data.classList

    // 机型的banner数据
    let { data: data4 } = await getPhoneModuleBannerList_c(currOneIndex.value)
    PhoneModuleBanner.value = data4._data.brandList
    console.log(PhoneModuleBanner.value);

    // 机型的第三层热门机型的数据
    let { data: data5 } = await getTopSalesNumProduct_c()
    hotPhoneData.value = data5._data.data

    // 机型的第三层机型的列表数据
    let { data: data6 } = await getSpuListProduct_c(currOneIndex.value, currTwoIndex.value)
    phoneSuplist.value = data6._data.spuList

})

// 触底加载
const onLoad = async () => {
    let { data: data2 } = await getPhoneListData_c({ page: phonePage.value, classId: currOneIndex.value, brandId: currTwoIndex.value, spuId: currThreeIndex.value, startPrice: stPrice.value, endPrice: enPrice.value, conditionId: chenseActive.value, romId: romeActive.value, bodyColorId: bodyColorActive.value, versionTypeId: versionTypeActive.value, networkTypeId: networkTypeActive.value, keyword: keyword.value })
    phoneListData.value = data2._data.list
    console.log(phoneListData.value, 'phone数据');
    phoneListData.value = [...phoneListData.value, ...data2._data.list]
    loading.value = false

    if (!phoneListData.value.length) {
        finished.value = true
    }
}

// 筛选的确认和缺货判断
const sureText = computed(() => {
    return phoneListData.value.length > 0 ? '确认' : '暂时缺货'
})



</script>

<template>
    <van-sticky class="phone-show-title" :offset-top="top">
        <div class="zonghe" :class="{ active: zhActive }" @click.stop="zhChange">综合</div>
        <div class="price" @click.stop="prChange" :class="{ active: prActive }">
            <span class="price-color">价格</span>
            <div>
                <van-icon name="arrow-up" size="12" class="up-icon" />
                <van-icon name="arrow-down" size="12" class="down-icon" />
            </div>

        </div>
        <div class="phone-Models" @click.stop="showPopup2" :class="{ active: phoneActive }">机型</div>
        <div class="phone-choose" @click.stop="showPopup" :class="{ active: chooseActive }">筛选</div>
    </van-sticky>
    <!-- 展示的列表数据 -->
    <div class="phone-data-list">
        <div class="phone-list">
            <!-- PhoneDataCard -->
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
                v-if="phoneListData.length">
                <HomePhoneCard :showData="p" v-for="p in phoneListData" :key="p.id" />
            </van-list>
            <div v-else>
                <div class="nothing">
                    <div class="img-box animate__animated animate__bounceInDown animate__slow">
                        <img src="@/assets/images/shopcart/1678328261551.png" alt="">
                    </div>
                    <div class="nothing-text animate__animated animate__bounceInRight animate__slow">暂无商品</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 筛选右侧弹出 -->
    <van-popup v-model:show="showRight" position="right" round :style="{ width: '82%', height: '100%' }"
        class="module-page">
        <div class="phone-module-box">
            <div class="head-modile">
                <div class="head-module-title title">机型</div>
                <div class="head-module-style">
                    <span>{{ textValue }}</span>
                    <van-icon name="arrow" size="14" @click.stop="goToChoosePhoneModule" />
                </div>
            </div>
            <div class="module-price" v-show="chooseDataPrice">
                <div class="title">{{ chooseDataPrice.name }}</div>
                <div class="qujian">
                    <input type="text" placeholder="最低价"> -
                    <input type="text" placeholder="最高价">

                </div>
                <div class="price-list" v-show="chooseDataPrice">
                    <div class="price-item" v-for="(item, i) in chooseDataPrice.value" :key="i"
                        @click.stop="changePrice(item.startPrice, item.endPrice, i)" :class="{ active: i == priceActive }">
                        {{ item.startPrice == 0 && item.endPrice ? item.endPrice / 100 + '以下' : item.startPrice &&
                            !item.endPrice ?
                            item.startPrice / 100 + '以上' : item.startPrice / 100 + '-' + item.endPrice / 100 }}
                    </div>
                </div>
                <div class="title chs" v-show="chooseDataChense">{{ chooseDataChense.name }}</div>
                <div class="new-list" v-show="chooseDataChense">
                    <div class="new-item" v-for="c in chooseDataChense.value" :key="c.conditionId"
                        @click="changeChense(c.conditionId)" :class="{ active: c.conditionId == chenseActive }">
                        {{ c.conditionName }}
                    </div>
                </div>
                <div class="title chs" v-show="chooseDataRomes">{{ chooseDataRomes.name }}</div>
                <div class="new-list" v-show="chooseDataRomes">
                    <div class="new-item" v-for="c in chooseDataRomes.value" :key="c.romId" @click="changeRome(c.romId)"
                        :class="{ active: c.romId == romeActive }">
                        {{ c.romName }}
                    </div>
                </div>
                <div class="title chs" v-show="chooseDataBodyColor">{{ chooseDataBodyColor.name }}</div>
                <div class="new-list" v-show="chooseDataBodyColor">
                    <div class="new-item" v-for="c in chooseDataBodyColor.value" :key="c.bodyColorId"
                        @click="changebodyColor(c.bodyColorId)" :class="{ active: c.bodyColorId == bodyColorActive }">
                        {{ c.bodyColorName }}
                    </div>
                </div>
                <div class="title chs" v-show="chooseDataVersionType">{{ chooseDataVersionType.name }}</div>
                <div class="new-list" v-show="chooseDataVersionType">
                    <div class="new-item" v-for="c in chooseDataVersionType.value" :key="c.versionTypeId"
                        @click="changeVersionType(c.versionTypeId)"
                        :class="{ active: c.versionTypeId == versionTypeActive }">
                        {{ c.versionTypeName }}
                    </div>
                </div>
                <div class="title chs" v-show="chooseDataNetworkType">{{ chooseDataNetworkType.name }}</div>
                <div class="new-list" v-show="chooseDataNetworkType">
                    <div class="new-item" v-for="c in chooseDataNetworkType.value" :key="c.networkTypeId"
                        @click="changeNetworkType(c.networkTypeId)"
                        :class="{ active: c.networkTypeId == networkTypeActive }">
                        {{ c.networkTypeName }}
                    </div>
                </div>
            </div>
            <div class="bottom-box">
                <div class="reset">重置</div>
                <div class="sure active" :class="{ active1: sureText == '暂时缺货' }" @click.stop="closeShowright">{{ sureText
                }}</div>
            </div>
        </div>
    </van-popup>

    <!-- 机型弹出 -->
    <van-popup v-model:show="showPhoneModule" position="bottom" :style="{ width: '100%', height: '100%' }" z-index="3001"
        class="choose-phone-module">
        <van-sticky class="head">
            <div class="head-phone">
                <div class="choose-title">选择机型</div>
                <van-icon name="cross" size="22" @click.stop="showPhoneModule = false" class="close-module" />
            </div>
            <div class="module-list-box">
                <van-grid class="module-list" :border="false">
                    <van-grid-item class="module-item" v-for="s in choosePhoneModuleData" :key="s.classId"
                        @click="oneActive(s.classId)">
                        <van-image :src="s.picture" class="item-img" />
                        <div class="item-text" :class="{ active: currOneIndex == s.classId }">{{ s.className }}</div>
                    </van-grid-item>
                </van-grid>
            </div>
        </van-sticky>
        <div class="left-banner">
            <div class="banner-item" :class="{ active: showActive }" @click.stop="showActive2">
                不限品牌
            </div>
            <div>
                <div class="banner-item" v-for="b in PhoneModuleBanner" :key="b.brandId"
                    :class="{ active: currTwoIndex == b.brandId }" @click.stop="twoActive(b.brandId)">
                    {{ b.brandName }}
                </div>
            </div>
        </div>

        <van-sticky class="right-phone-box" :offset-top="170">
            <div class="right-phone-module">
                <div class="phone-module-box2" v-if="showActive">
                    <div class="three-title" @click.stop="chooseMoudlePhone" :class="{ active: moeulePhoneActive }">不限机型
                    </div>
                    <div class="hot-text" v-show="hotPhoneData.length">热门机型</div>
                    <div class="phone-module-list">
                        <div class="three-title" v-for="h in hotPhoneData" :key="h.spuId"
                            :class="{ active: currThreeIndex == h.spuId }"
                            @click.stop="changePhoneData(h.spuId, h.productName)">{{
                                h.productName }}</div>
                    </div>
                </div>
                <div class="phone-module-box2" v-else>
                    <div class="phone-module-list">
                        <div class="three-title" @click.stop="chooseMoudlePhone">不限机型</div>
                        <div class="three-title" v-for="p in phoneSuplist" :key="p.spuId"
                            :class="{ active: currThreeIndex == p.spuId }"
                            @click.stop="changePhoneData(p.spuId, p.productName)">{{
                                p.productName
                            }}</div>
                    </div>
                </div>
            </div>
        </van-sticky>
    </van-popup>
</template>

<style scoped lang="scss">
.phone-show-title {
    width: 100%;
    height: .46rem;
    background-color: #fff;
    font-size: .17rem;

    .phone-Models.active {
        color: var(--home-red);
    }

    .phone-choose.active {
        color: var(--home-red);
    }

    .price.active {
        color: var(--home-red);
    }

    ::v-deep(.van-sticky) {
        display: flex;
        height: 100%;
        justify-content: space-around;
        align-items: center;
        z-index: 20px;
        background-color: #fff;
    }

    .price {
        display: flex;

        .up-icon,
        .down-icon {
            display: block;
        }
    }

    .zonghe {

        &.active {
            color: #f9334b;
        }
    }

}

.phone-data-list {
    background-color: #f6f7fa;

    .phone-list {
        width: 355px;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        .nothing {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: .8rem;

    .img-box {
      width: .9rem;
      height: .9rem;
    }

    .nothing-text {
      margin-top: .3rem;
      margin-bottom: .2rem;
      color: var(--text-gray2);
      opacity: .6;
    }

    .nothing-btn {
      position: relative;
      width: 1.2rem;
      height: .44rem;
      background-color: var(--bgc-red-deep);
      background-image: linear-gradient(to right, var(--bgc-red), var(--bgc-red-deep), var(--bgc-red));
      color: var(--text-white);
      font-size: .16rem;
      border-radius: .04rem;
      line-height: .44rem;
      text-align: center;
    }
  }
    }
}


.module-page {
    .bottom-box {
        width: 100%;
        display: flex;
        color: #111;
        border: 1px solid #f1f1f1;
        box-sizing: border-box;
        margin-top: .13rem;

        >div {
            width: 50%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
            background-color: #fff;

            &.active {
                background-color: var(--home-red);
                color: #fff;
            }

            &.active1 {
                background-color: #e9eaf0;
                color: #ccc;
            }
        }
    }
}

.phone-module-box {
    width: 3.04rem;
    position: relative;
    padding-bottom: 50px;

    .title {
        font-size: .16rem;
        color: #000;
        font-weight: bold;
    }

    .head-modile {
        padding-left: .12rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: .45rem;

        .head-module-style {
            display: flex;
            align-items: center;

            >span {
                display: block;
                font-size: .13rem;
                padding: .03rem;
                background-color: #f6f7fa;
                margin-right: .05rem;
            }
        }

    }

    .module-price {
        margin-top: .25rem;
        padding-left: 12px;
        // padding-bottom: 100px;

        .qujian {
            font-size: 30px;
            margin-top: 10px;

            input {
                width: 120px;
                height: 30px;
                background-color: #f6f7fa;
                border-radius: 5px;
                outline: none;
                font-size: 13px;
                text-align: center;
                border: 1px solid #f1f1f1;
            }
        }

        .price-list,
        .new-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;

            .price-item,
            .new-item {
                width: 88px;
                height: 36px;
                background-color: #f6f7fa;
                color: #222;
                text-align: center;
                line-height: 36px;
                font-size: 13px;
                margin-right: 8px;
                margin-bottom: 10px;
                border-radius: 3px;
                border: 1px solid #f1f1f1;

                &.active {
                    background-color: #f8e8ea;
                    border-color: var(--home-red);
                }

                &:nth-child(3n) {
                    margin-right: 0;
                }
            }
        }

        .chs {
            margin-top: 12px;
            margin-bottom: 12px;
        }

    }

}

.choose-phone-module {
    z-index: 3001 !important;
}

.head-phone {
    display: flex;
    align-items: center;
    height: 50px;

    .choose-title {
        font-size: .2rem;
        margin-left: 145px;
    }

    .close-module {
        margin-left: 100px;
    }



}

.module-list-box {
    overflow-x: auto;
    box-sizing: border-box;
}

.module-list-box::-webkit-scrollbar {
    display: none;
}

.module-list {
    flex-wrap: nowrap !important;
    width: 19.2rem;

    .module-item {
        width: 80px;
        height: 110px;

        .item-img {
            width: .55rem;

            img {
                height: .55rem !important;
            }
        }

        .item-text {
            margin-top: 10px;
            font-size: 13px;
            color: #111;

            &.active {
                color: var(--home-red);
            }
        }


    }

}

.left-banner {
    width: 78px;
    height: 497px;
    background-color: #f6f7fa;
    position: fixed;
    top: 170px;
    left: 0;

    .banner-item {
        width: 100%;
        height: 40px;
        color: #000;
        text-align: center;
        line-height: 40px;
        font-size: 13px;

        &.active {
            background-color: #fff;
            color: var(--home-red);
        }
    }
}

.right-phone-module {
    padding-left: .15rem;
    width: 2.97rem;
    background-color: #fff;
    box-sizing: border-box;
    float: right;

    .three-title {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        padding: 0 .05rem;
        width: 1.18rem;
        height: .36rem;
        font-size: .13rem;
        background-color: #f6f7fa;
        color: #000;
        border: 1px solid #f1f1f1;
        margin-top: .14rem;
        margin-right: 10px;
        font-weight: 500;

        &.active {
            background-color: #fce6ea;
            border-color: #f9334b;
        }

    }

    .hot-text {
        font-size: .15rem;
        line-height: .3rem;
        color: #000;
        font-weight: 600;
        margin-top: 15px;
    }

    .phone-module-list {
        display: flex;
        flex-wrap: wrap;
    }


}

.right-phone-box {
    overflow: scroll;
}
</style>